<template>
    <el-aside width="250px">
        <el-menu
                :default-active="this.$store.state.menus.editableTabsValue"
                class="el-menu-vertical-demo"
                background-color="#333744"
                text-color="#fff"
                active-text-color="#ffd04b"
        >
            <router-link to="/sys/adminIndex">
            <el-menu-item index ="Index" @click="selectMenu({name: 'adminIndex',title:'首页'})">
                <template slot="title">
                    <i class="el-icon-s-custom">
                    </i>
                    <span>首页</span>
                </template>
            </el-menu-item>
            </router-link>
            <el-submenu :index="menu.name" v-for="menu in menuList">
                <template slot="title">
                    <i :class="menu.icon"></i>
                    <span>{{menu.title}}</span>
                </template>

                <router-link :to="item.path" v-for="item in menu.children">
                <el-menu-item :index="item.name" @click="selectMenu(item)">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{item.title}}</span>
                    </template>
                </el-menu-item>
                </router-link>
            </el-submenu>
        </el-menu>
    </el-aside>
</template>

<script>
    export default {
        name: "SideMenu",
        data(){
            return {
            }
        },
        computed:{
            menuList:{
                get(){
                    return this.$store.state.menus.menuList
                }
            }
        },
        methods:{
            selectMenu(item){
                this.$store.commit("addTab",item)
            }
        }
    }
</script>

<style scoped>
    span{
        font-family: "Helvetica Neue";
    }
    .el-menu{
        height: 100%;
    }
    span{
        font-size: medium;
        font-family: "Helvetica Neue";
    }
    a{
        text-decoration: none;
    }
    .el-aside{
        background-color: #333744;
    }
</style>
